
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>API配置</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <link href="/static/devtools30/layui-v2.5.6/ext/soulTable/soulTable.css" rel="stylesheet"/>

    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>

    <style>
        /*-------------------------tab-------------------------*/

        .layui-tab {
            margin: 0;
        }


        /*边框*/

        .layui-tab-title {
            border-bottom-width: 3px;
            border-bottom-color: #f7f7f7;
        }


        /*字体*/

        .layui-tab-title li {
            font-size: 11px!important;
        }


        /*高度*/

        .tabwrap .layui-tab-title {
            height: 24px;
        }


        /*高度*/

        .tabwrap .layui-tab-title li {
            line-height: 24px;
        }


        /*高度*/

        .tabwrap .layui-tab-title .layui-this:after {
            height: 24px;
        }

        .layui-tab-title .layui-this:after {
            /*height: auto!important;*/
        }


        /*选中时样式*/

        .tabwrap .layui-tab-title .layui-this {
            color: white;
            background: #41BFC0;
        }


        /*关闭按钮样式*/

        .tabwrap .layui-tab-title li .layui-tab-close {
            color: #FFFFFF!important;
        }


        /*顶部搜索容器*/

        .tophead {
            height: 32px;
            /*border-bottom: 1px solid #F7F7F7;*/
            padding: 0 5px;
        }


        /*顶部输入框，下拉框去掉layui默认边距*/

        .tophead .layui-form-item {
            margin-bottom: 0px!important;
        }


        /*顶部输入框，下拉框左边文本样式*/

        .tophead .layui-form-label {
            padding: 0;
            line-height: 25px;
            width: auto;
        }


        /*顶部form块样式*/

        .tophead .layui-input-block {
            margin-left: 34px;
            min-height: 26px;
        }


        /*顶部输入框，下拉框设置高度*/

        .tophead .layui-input,
        .layui-select {
            height: 25px;
        }


        /*顶部下拉框设置子项高度*/

        .tophead .layui-form-select dl {
            top: 26px;
            padding: 0;
        }


        /*顶部下拉框设置子项内容高度*/

        .tophead .layui-form-select dl dd,
        .layui-form-select dl dt {
            line-height: 24px;
        }

        .tophead .layui-form-item {
            width: 165px;
        }


        /*顶部下拉框图标大小*/

        .tophead .layui-form-select .layui-edge {
            border-width: 4px;
        }


        /*搜索框左边距*/

        .tophead .search .layui-input-block {
            margin-left: 32px;
        }


        /*表格字体大小*/

        .layui-table td,
        .layui-table th {
            font-size: 11px!important;
        }


        /*表格边距*/

        .layui-table,
        .layui-table-view {
            margin: 0;
        }

        .tab0>li:nth-child(1) .layui-icon.layui-unselect.layui-tab-close {
            display: none;
        }
        .layui-btn {
            height: 26px;
            line-height: 26px;
            font-size: 11px;
        }
    </style>
</head>
<body>
<div>
    <div class="layui-tab tabwrap" lay-allowClose="true" lay-filter="tab" style="border-color: #f7f7f7;border-style: solid;">
        <ul class="layui-tab-title tab0" id="layui-tab-all" style="background: #F5F7FA;">
            <!--三级导航（tab）-->
            <li class="layui-this">全部</li>
        </ul>
        <div class="layui-tab-content content0" style="padding: 0;">
            <!--tab--全部-->
            <div class="layui-tab-item layui-show">
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf">
                    <div class="flex flex-align-center">
                        <div class="layui-form flex flex-align-center" lay-filter="formTest">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-block">
                                    <select name="selType" id="selType"  lay-filter="selType">

                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item marginleft10">
                                <label class="layui-form-label">模板id</label>
                                <div class="layui-input-block">
                                    <input type="text" name="formid" id="formid" placeholder="请输入模板ID" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-form-item marginleft10 search">
                                <label class="layui-form-label">查询</label>
                                <div class="layui-input-block">
                                    <input type="text" name="searchValue" id="searchValue" placeholder="请输入名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <button type="button" onclick="getDataList()" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>
                        </div>
                    </div>
                    <div class="layui-btn-group btns tab1">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='101'>分类维护</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"  onclick="editForm()">新增表单</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='103'>克隆表单</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='exportForm'>导出</button>
                    </div>
                </div>
                <div style="height:100%;width: 100%;background: #F7F7F7;padding: 3px 0;">
                    <div class="backgroundf">
                        <table id="mygrid" lay-filter="mygrid"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();
    var selTableId;

    layui.config({
        base: '/static/devtools30/layui-v2.5.6/ext/',// 第三方模块所在目录
        version: 'v1.5.10' // 插件版本号
    }).extend({
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
        dltable: 'treegrid/dltable',
        treeGrid:'treegrid/treeGrid'
    });
    layui.use(['form', 'table', 'jquery','treeGrid','layer','soulTable'], function(){
        $(function () {
            // initGrid();
            loaddata();
            initEvent();

            bindForm();


        })
    });



    function loaddata(){
        var data={
            search:$("#searchValue").val(),
            flid:$("#selType").val()
        };

        dlCommon.getJSON("/DevtFormListTemplateController/getDataByfl", data, function (data) {
             initGrid(data.data)
        }, true);
    }


    function initGrid(data){
        layui.table.render({
            id:'mygrid',
            elem: '#mygrid',
            height: height-80,
            size: 'sm', //小尺寸的表格
            page: true, //开启分页
            data:data?data:[],
            cols: [
                [ //表头
                    {type: 'checkbox'},
                    { field: 'xh2', title: '序号',type:"numbers", width: '6%' },
                    { field: 'id', title: '模板ID',width: '12%' },
                    { field: 'flmc', title: '分类', width: '8%',filter:true },
                    { field: 'metatableshow', title: '关联模型', width: '10%',filter:true, },
                    { field: 'name', title: '表单名', width: '20%' ,filter:true},
                    { field: 'active', title: '启用', width: '5%', },
                    { field: 'pageflag', title: '分页', width: '5%', },
                    { field: 'bz', title: '备注',filter:true, },
                    { field: 'createTime', title: '创建日期', width: '10%', },
                    { field: 'opera', title: '操作', width: "15%",templet: function(d){
                            var str="";
                            str += '<button type="button" onclick="openOpt(\''+d.id+'\',\''+d.name+'\')" class="layui-btn  layui-btn-xs layui_edit_btn">配置</button>';
                            str += '<button type="button" onclick="formDesign(\''+d.id+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">模板设计</button>';
                            str += '<button type="button" onclick="editForm(\''+d.id+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">修改</button>';
                            str += '<button type="button" onclick="delForm(\''+d.id+'\')" class="layui-btn layui-btn-danger layui-btn-xs layui_edit_btn">删除</button>';


                            return str;
                        }
                    }
                ]
            ],
            filter: {
                bottom: false
            },
            done: function() {
                // 在 done 中开启
                layui.soulTable.render(this)
            }
        });

        dlCommon.layerTableOn("mygrid",function(obj){
            selTableId=obj.data.id;
        })

    }
    function initEvent(){
        /*按钮点击事件*/
        $('.tab1>button').on('click', function() {
            var names = $(this)[0].name;
            if(names == '101') {
                layer.open({
                    type: 2,
                    title: '分类维护',
                    area: ['800px', '500px'],
                    content: '/V_DevtFormTypeController/toPage' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    ,end:function () {
                        bindForm();
                        loaddata();
                    }
                });
            }
            if(names == '102') {
                editForm();
            }
            if(names == '103') {
                if(!selTableId){
                    layui.layer.msg("请选择表单。")
                    return;
                }
                var url="/V_DevtFormListTemplateController/toClone?templateId="+selTableId;
                dlCommon.layeropen(650,300,"表单克隆",url,{
                    end:function () {
                        bindForm();
                        loaddata();
                    }
                });
            }
            if(names == 'exportForm') {
                var checkStatus = layui.table.checkStatus('mygrid'); //idTest 即为基础参数 id 对应的值
                var tableidlist=checkStatus.data
                var ids=''
                for (var i = 0; i < tableidlist.length; i++) {
                    ids+=tableidlist[i].id+","
                }
                if(ids==''){
                    dlCommon.layerMsg("请先选择表单！")
                    return;
                }
                var url="/DevtFormListTemplateController/export?formidlist="+ids;
                window.open(url);
            }
        })
    }
    function openOpt(id,mc){
        if(!id){
            return;
        }
        //新增tab
        var id = id;
        var title = mc;
        var element = layui.element;
        if($("[lay-id='"+id+"']").length>0){
            element.tabChange("tab", id);
            return;
        }

        var url="/V_DevtFormListTemplateController/optPage?id="+id;
        element.tabAdd('tab', {
            title: title,
            content: "<iframe class='iframecont' style='border-width: 0px;border-color: #ffffff;border-style: solid;' id='iframeAll' width='99%' src='"+url+"'></iframe>" //支持传入html
            ,
            id: id
        });
        element.tabChange('tab', id);
        /*动态设置iframe高度*/
        $('.iframecont').height(height - 45)
    }
    function bindForm(){
        var valueForm=layui.form.val('formTest');
        dlCommon.getJSON("/DevtFormTypeController/getAll",{},function(res){
            var str='<option value="">全部</option>';
            $(res.data).each(function(i,d){
                str+='<option value="'+d.id+'">'+d.name+'</option>';
            })
            $("#selType").html(str);
            layui.form.render();
            layui.form.val('formTest',valueForm);
        });

    }
    function editForm(id){
        var url="/V_DevtFormListTemplateController/toEdit?flid="+$("#selType").val();
        if(id){
            url+="&id="+id;
        }
        dlCommon.layeropen(650,500,"表单编辑",url,{
            end:function () {
                bindForm();
                loaddata();
            }
        });
    }

    function formDesign(id){
        window.open("/V_DevtFormDesignEntityController/toPage?pid="+id);
    }

    function delForm(id){
        if(!id){
            return;
        }
        dlCommon.layerConfirm("是否确定删除该数据？",function(){
            dlCommon.getJSON("/DevtFormListTemplateController/delete",{id:id},function(res){
                if(!res.success){
                    dlCommon.layerError(res.msg);
                    return;
                }
                getDataList();
            })
        })
    }
    function getDataList() {
        var data={
            search:$("#searchValue").val(),
            formid:$("#formid").val(),
            flid:$("#selType").val()
        };
        layui.table.reload("mygrid",{
            url:"/DevtFormListTemplateController/getDataByfl",
            where:data,
            loading:true,
        })
    }

    $(function(){
        /*动态设置iframe高度*/
        var h = document.body.clientHeight
        $('#iframeAll').height(h - 45)

        layui.use('element', function() {
            var element = layui.element;
            element.on('tab(tab)', function(data) {
                //var url = this.getAttribute('url')
                //$('#iframeAll').attr('src',url)

            });

        });





    })

</script>

</html>